<template>
  <s-layout
    navbar="inner1"
    :bgStyle="{ color: 'transparent' }"
  >
    <view class="content">
      <assNavbar
        title="鲸囍商户"
        :background="{
			img: sheep.$url.cdn('/storage/giveaway/20250314/2ddcedf3c1a5d0fac0c300e6073840c7.png'),
		}"
      />
      <image
        class="bgTop"
        :src="sheep.$url.cdn('/storage/giveaway/20250314/2ddcedf3c1a5d0fac0c300e6073840c7.png')"
        mode="widthFix"
      />
      <su-tabs
        :list="tabMaps"
        lineColor="#003288"
        :activeStyle="{ color: '#003288', fontSize: '32rpx' }"
        :inactiveStyle="{ fontSize: '32rpx' }"
        lineHeight="3"
        lineWidth="28"
        :scrollable="false"
        @change="onTabsChange"
        :current="state.current"
      >
      </su-tabs>
      <view
        class="ss-m-x-24"
        style="position:relative"
      >
        <!-- 商家入驻 -->
        <template v-if="state.current == 0">

          <merchantsSettlement
            @getType="getType"
            @submit="getHeyan"
            v-if="state.current == 0"
            ref="merchantsSettlementRef"
          ></merchantsSettlement>
        </template>

        <!-- 我的商户 -->
        <template v-if="state.current == 1">
          <view class="ss-m-y-40 margin-left">商户自主入驻</view>
          <div
            class="list-box"
            v-for="(item,index) in state.list"
            :key="index"
          >
            <!-- <div
              class="card-box"
              v-if="item.type==1&&item.status==1"
            >
              <div class="text-mea">商家名称：{{item.merchant_name}}</div>
              <div class="text-mea">商家类型：鲸囍商户</div>
              <div class="text-mea">成为时间：{{item.update_time}}</div>
              <div class="btn-box">
                <button
                  @tap.stop="goPageCli(item)"
                  class="ss-reset-button btn-apply"
                >支付进行申请</button>
              </div>
              <template v-if="item.status==1">
			      <view class="btn-box">
			        <button
			          @tap="signCode(item)"
			          class="ss-reset-button btn-yao ss-flex"
			          style="width:250rpx"
			        >
			  	    <image
			  	      style="width:32rpx;height:32rpx;margin-right: 20rpx;"
			  	      :src="sheep.$url.cdn('/static/icon/code-white.png')"
			  	    />
			          扫码签约
			          </button>
			          </view>
			        </template>
            </div> -->
            <div
              class="card-box"
              v-if="item.type==2"
              @click="goPageCli(item)"
            >
              <div class="text-mea ss-line-1 flex-box">
                <div class="title-style">商家名称：{{item.merchant_name}}</div>
                <div
                  class="img-box"
                  @tap.stop="refreshData(item,index)"
                >
                  <image
                    src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250506/f2861d4d39e40be48751c08d609556b4.png"
                    mode="scaleToFill"
                  />
                </div>
              </div>
              <div class="text-mea">商家类型：鲸囍商户</div>
              <div class="text-mea">让利比例：{{item.discount}}%</div>
              <div class="text-mea">提交时间：{{item.update_time}}</div>

              <div class="ss-flex ss-m-t-20">
                <template v-if="item.status==0">
                  <image
                    style="width:48rpx;height:48rpx"
                    :src="sheep.$url.cdn('/storage/sjrz/20250402/19f29fd99e661ed34504aabd0558650c.png')"
                  />
                  <view class="remark ss-m-l-48">正在审核中</view>
                  <view class="btn-box">
                    <view
                      @tap.stop="changeDetail(item)"
                      class="ss-reset-button btn-style "
                      style="width:200rpx"
                    >
                      修改基本信息
                    </view>
                  </view>
                </template>
                <template v-if="item.status==2">
                  <image
                    style="width:48rpx;height:48rpx"
                    :src="sheep.$url.cdn('/storage/sjrz/20250402/8c82fc00fb44709577e3e842b3f972f8.png')"
                  />
                  <view class="remark">审核失败</view>
                </template>
                <template v-if="item.status==1">
                  <view class="btn-box">
                    <view
                      @tap.stop="changeDetail(item)"
                      class="ss-reset-button btn-style "
                      style="width:200rpx"
                    >
                      修改基本信息
                    </view>
                    <button
                      v-if="item.agreement==0||item.real_name==0||item.elec==0"
                      @tap.stop="signCode(item)"
                      class="ss-reset-button btn-yao ss-flex"
                      style="width:180rpx;margin-left: 20rpx;"
                    >
                      <image
                        style="width:32rpx;height:32rpx;margin-right: 20rpx;"
                        :src="sheep.$url.cdn('/static/icon/code-white.png')"
                      />
                      扫码签约
                    </button>
                    <button
                      v-if="item.agreement==1&&item.real_name==1&&item.elec==1"
                      @tap.stop="reviseProfit(item)"
                      class="ss-reset-button btn-yao ss-flex left-style"
                      style="width:180rpx"
                    >
                      修改让利
                    </button>
                    <button
                      v-if="item.agreement==1&&item.real_name==1&&item.elec==1"
                      @tap="openShopDetail(item)"
                      class="ss-reset-button btn-yao ss-flex left-style"
                      style="width:180rpx"
                    >
                      <image
                        style="width:32rpx;height:32rpx;margin-right: 20rpx;"
                        :src="sheep.$url.cdn('/static/icon/code-white.png')"
                      />
                      收款码
                    </button>
                  </view>
                </template>
              </div>

              <template v-if="item.status==2">
                <view style="color:#666666;font-size:28rpx">
                  {{item.remark}}
                </view>
                <view class="btn-box">
                  <button class="ss-reset-button btn-change ss-flex">
                    修改提交
                  </button>
                </view>
              </template>
            </div>

            <!-- <view
              @tap="goshop"
              class="card-box ss-m-t-20"
              v-if="item.status==1&&item.type==2"
            >
              <merchantDetail
                :jj_id="item.id"
                :rz_id="state.rzList[0].id"
              ></merchantDetail>
            </view> -->

          </div>
          <div
            v-if="!state.list.length"
            class="noneData-box"
          >暂无商户自主入驻信息</div>
          <!-- 我帮忙入驻的商家 -->
          <view
            class="ss-p-x-24"
            v-if="state.role!='user'"
          >
            <view class="ss-m-y-40">BD代商户入驻</view>
            <template
              v-for="(item,index) in state.helpList"
              :key="index"
            >
              <view
                @tap="jump(item)"
                class="card-box ss-m-b-20"
              >
                <view class="text-mea ss-line-1">商家名称：{{item.merchant_name}}</view>
                <view class="text-mea">商家类型：鲸囍商户</view>
                <div class="text-mea">让利比例：{{item.discount}}%</div>
                <view class="text-mea">提交时间：{{item.update_time}}</view>

                <view
                  class="ss-flex ss-m-t-20"
                  style="flex:1"
                >
                  <template v-if="item.status==0">
                    <image
                      style="width:48rpx;height:48rpx"
                      :src="sheep.$url.cdn('/storage/sjrz/20250402/19f29fd99e661ed34504aabd0558650c.png')"
                    />
                    <view class="remark ss-m-l-48">正在审核中</view>
                  </template>

                  <view
                    v-if="item.status==1"
                    class="ss-flex justify-between"
                    style="flex:1"
                  >
                    <view
                      class="font-w"
                      style="color:#50CEB8"
                    >审核成功</view>
                    <view class="btn-box">
                      <view
                        @tap.stop="changeDetail(item)"
                        class="ss-reset-button btn-style "
                        style="width:200rpx"
                      >
                        修改基本信息
                      </view>
                      <button
                        class="ss-reset-button btn-yao ss-flex"
                        style="width:156rpx;background: #348DC4;margin-left: 20rpx;"
                      >
                        查看详情
                      </button>
                    </view>
                  </view>
                  <view
                    v-if="item.status==2"
                    class="ss-flex justify-between"
                    style="flex:1"
                  >
                    <view
                      class="font-w"
                      style="color:#FF1D1D"
                    >审核拒绝</view>
                    <button
                      class="ss-reset-button btn-yao ss-flex"
                      style="width:156rpx;background: #348DC4;"
                    >
                      重新提交
                    </button>
                  </view>
                </view>
              </view>
            </template>
            <div
              v-if="!state.helpList.length"
              class="noneData-box"
            >
              暂无BD代商户入驻信息
            </div>
          </view>

        </template>
      </view>
      <su-fixed
        bottom
        v-if="state.current == 0&&state.type==0"
      >

        <view class="ss-p-x-20 ss-p-b-60 ss-flex justify-between">
          <button
            :disabled="state.flag==1"
            class="ss-reset-button btn ss-m-t-40"
            @click='btnClick()'
          >
            {{state.flag===1?'已入驻':
			state.flag===0?'待审核':
			state.flag===2?'已驳回':
			'立即入驻'
			}}
          </button>
        </view>
      </su-fixed>

    </view>

    <surprise-code
      v-if="state.showSignCode"
      @cancel="state.showSignCode = false"
      @end="getList"
      :show="state.showSignCode"
      :jjId="state.jjId"
      :merchantNo="state.merchant_no"
    >
    </surprise-code>
    <reviseProfitPopup
      ref="reviseProfitPopupRef"
      @submit="submit"
    ></reviseProfitPopup>
    <surpriseCodePopup ref="surpriseCodePopupRef"></surpriseCodePopup>

  </s-layout>
</template>

<script setup>
import sheep from '@/sheep';
import assNavbar from "@/components/ass-navbar.vue"
import merchantDetail from "@/ygb/pages/commission/components/merchant-detail.vue"
import surpriseCode from "@/ygb/pages/commission/components/surprise-code.vue"
import { ref, reactive, computed, onBeforeMount, nextTick } from 'vue'
import { onLoad, onShow, onHide, onPullDownRefresh } from '@dcloudio/uni-app';
import { showShareModal } from '@/sheep/hooks/useModal';
import merchantsSettlement from "./components/merchantsSettlement.vue";
import reviseProfitPopup from "./components/reviseProfitPopup.vue";
import surpriseCodePopup from "./components/surpriseCodePopup.vue";

import commissionAPI from "@/ygb/api/commission"

const sys_navBar = sheep.$platform.navbar;//标题栏高度
const reviseProfitPopupRef = ref(null);
const surpriseCodePopupRef = ref(null);
const state = reactive({
  jjItem: {},
  jjId: '',
  showSignCode: false,
  type: 0,
  current: 0,
  list: [],
  flag: false,
  invite_phone: '',//被邀请人手机号
  shareInfo: {},

  inviteInfo: {},
  isRz: false,
  rzList: [],
  showDetail: false,
  shopDetail: {},
  licenseUrl: '',
  role: 'user',//身份
  helpList: [],
  parent_user: {},//上级
  heyanShow: false,
  userTypeObj: {},
  merchant_no: ''
})


const tabMaps = [

  {
    name: '商户入驻',
    value: 0,
  },
  {
    name: '我的商户',
    value: 1,
  }
];

// 修改让利
const reviseProfit = (item) => {
  reviseProfitPopupRef.value.open(item)
}

const submit = (obj) => {
  surpriseCodePopupRef.value.open(obj)
}
// 切换选项卡
function onTabsChange (e) {
  state.current = e.index;
  state.type = 0
}

// bd替别人入驻
function bdApply () {
  sheep.$router.go('/ygb/pages/commission/merchant/apply', {
    type: 1,//0自己入驻  1代理帮忙入驻
    shopType: 3,
  })
}


function btnClick () {
  let obj = null
  if (state.type == 1) {
    obj = { ...state.userTypeObj }
  } else {
    obj = null
  }
  console.log('state.type', state.type)
  var inviteInfo = JSON.stringify(state.type == 0 ? {} : state.inviteInfo)//根据填写的手机号获取的信息
  if (state.flag === false) {
    sheep.$router.go('/ygb/pages/commission/merchant/apply', {
      type: state.type,//0商户自主入驻  1bd代商户入驻
      shopType: 3,
      inviteInfo,
    })
  } else if (state.flag === 2) {//驳回
    sheep.$router.go('/ygb/pages/commission/merchant/result', { serve: 3, inviteInfo, type: state.type, userTypeObj: JSON.stringify(obj) })
  } else {
    sheep.$router.go('/ygb/pages/commission/merchant/result', { serve: 3, type: state.type, userTypeObj: JSON.stringify(obj) })
  }


}
// 刷新数据
const refreshData = (item, index) => {
  commissionAPI.merchant.getRefreshData(item.id).then(res => {
    if (res.error == 0) {
      getList()
      uni.showToast({
        title: '更新成功',
        icon: 'none',
        duration: 2000
      })
    }
  })

}



//跳转查看支付码页面
async function openShopDetail () {
  sheep.$router.go('/pages/merchant/pay_code')
}

async function getList () {
  const res = await commissionAPI.merchant.applyList({//查询进件列表
    serve: 3,//惊喜
    type: 2,//1入驻  2进件
    is_db: 0,//0自己  1帮助
  })
  if (res.error === 0) {
    state.list = res.data.map(item => {
      return {
        is_db: 0,
        ...item
      }
    })
    if (state.list.length > 0) {
      state.flag = res.data[0].status
    }

    // const res2 = await commissionAPI.merchant.applyList({//查询自己入驻
    //   serve: 3,//惊喜
    //   type: 2,//1入驻  2进件
    //   is_db: 0,//0自己  1帮助
    // })
    // state.rzList = res2.data

    // if (res2.data.length > 0) {//取最新的一条入驻记录
    //   state.flag = res2.data[0].status
    // }
    // if (res.data.length == 0) {
    //   state.list = res2.data
    // }
  }
}

async function getHelpList () {
  const res = await commissionAPI.merchant.applyList({//查询替别人入驻
    serve: 3,//惊喜
    type: 2,//1入驻  2进件
    is_db: 1,//0自己  1帮助 

  })
  if (res.error === 0) {
    console.log('查询替别人入驻', res.data)
    state.helpList = res.data.map(item => {
      return { ...item, is_db: 1 }
    })
  }
}


function goshop () {
  uni.$emit('goShop_search', state.rzList[0].merchant_name)
  sheep.$router.go('/pages/index/home', { keyword: state.rzList[0].merchant_name })
}
const inviteInfo = {
  mobile: sheep.$store('user').userInfo.mobile,
  nickname: sheep.$store('user').userInfo.nickname
}
// const shareData = computed(() => ({
//   title: '帮我入驻',
//   path: `/pages/commission/merchant/apply?writeType=invite&shopType=3&inviteInfo=${JSON.stringify(inviteInfo)}&type=0`,
//   // imageUrl:''
// }))

// 核验返回
async function getHeyan (e) {
  console.log(e)
  if (!e) {
    state.heyanShow = false
  } else {
    state.userTypeObj = e
    if (e.max_role == 'user') {
      state.heyanShow = false
    } else {
      state.heyanShow = true
      state.inviteInfo = e || {}
      sheep.$router.go('/ygb/pages/commission/merchant/apply', {
        type: 1,//0商户自主入驻  1bd代商户入驻
        shopType: 3,
        inviteInfo: JSON.stringify(state.inviteInfo)
      })
    }
  }
}
// 获取是bd代商户入驻，还是商户自己入驻
function getType (e) {
  console.log('获取是bd代商户入驻，还是商户自己入驻', e)
  state.type = e
}

function signCode (item) {
  state.jjItem = item
  state.jjId = item.id
  state.merchant_no = item.merchant_no
  state.showSignCode = true
}


function goPageCli (item) {

  // if(item.type==2&&item.status==1){//进件成功时，跳转商家详情页
  // 	sheep.$router.go('/pages/commission/merchant/surpriseForm', { type: 0,id:item?.id })
  // }
  uni.removeStorageSync('applyFormDataStorage')
  sheep.$router.go('/ygb/pages/commission/merchant/apply', { type: 0, rz_id: item?.id, is_db: item.is_db, pageStauts: JSON.stringify(item) })
}
// 帮人入驻，查看详情，重新提交
function jump (item) {
  var obj = {
    type: 1,//0自己入驻  1代理帮忙入驻
    shopType: 3,//3鲸囍生活  1电商商家  2本地生活
    rz_id: item.id,
    is_db: 1,
    pageStauts: JSON.stringify(item)
  }
  uni.removeStorageSync('applyFormDataStorage')
  sheep.$router.redirect('/ygb/pages/commission/merchant/apply', obj);
}


// 获取当前账号的身份
async function isMaker (mobile) {
  const res = await commissionAPI.merchant.getUserRoleByMobile(mobile)
  if (res.error == 0) {
    state.role = res.data.max_role
  }
}
const changeDetail = (item) => {
  sheep.$router.go('/pages/commission/merchant/informationSub', { ...item });
}

onLoad(async (opt) => {
  isMaker(sheep.$store('user').userInfo.mobile)
  if (opt && opt.current) {
    if (opt.current) {
      state.current = opt.current
    }
  }
})
onShow(() => {
  getList()
  getHelpList()

  // 已经绑定的上级
  // state.parent_user = sheep.$store('user').userInfo.parent_user || {}
  // if (state.parent_user?.id) {
  //   state.inviteInfo = state.parent_user
  // }

})
// 页面下拉刷新
onPullDownRefresh(() => {
  getList()
  getHelpList()
  setTimeout(function () {
    uni.stopPullDownRefresh();
  }, 500);
});


</script>

<style lang="scss" scoped>
.flex-box {
  display: flex;
  justify-content: space-between;
  position: relative;
  .title-style {
    // flex: 1;
    width: 94%;
  }
  .img-box {
    position: absolute;
    right: 0;
    top: -4rpx;
    width: 46rpx;
    height: 46rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
}
.left-style {
  margin-left: 20rpx;
}
.margin-left {
  margin-left: 20rpx;
}
.noneData-box {
  display: flex;
  justify-content: center;
  color: #5a5a5a;
}
.imgCardBox {
  padding: 28rpx 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  margin-top: 28rpx;
  position: relative;
  margin-bottom: 200rpx;
  .title-style {
    font-size: 32rpx;
    font-weight: bold;
    line-height: normal;
    margin-bottom: 19rpx;
  }
  .data-list {
    margin-bottom: 36rpx;
    .img-box {
      position: relative;
      .imgSize {
        width: 85rpx;
        height: 70rpx;
      }
      .imgConSize {
        width: 59rpx;
        height: 41rpx;
        position: absolute;
        top: 12rpx;
        left: 17rpx;
        margin: 0 auto;
      }
    }

    .text-style {
      margin-left: 48rpx;
      font-size: 28rpx;
      font-weight: 500;
      line-height: 131.43%;
    }
  }
}
.invite-box {
  background: linear-gradient(268deg, #5782e3 77%, rgba(87, 129, 227, 0) 102%);
  border-radius: 20rpx;
  color: #fff;
  font-size: 30rpx;
  padding: 30rpx;
  box-sizing: border-box;
  line-height: 1.5em;
}
.list-box {
  padding: 0 24rpx 0 24rpx;
  // position: absolute;
  // top: 50rpx;
  // left: 0;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 20rpx;
}

.card-box {
  border-radius: 20rpx;
  background-color: #ffffff;
  padding: 30rpx 30rpx 20rpx 30rpx;
  z-index: 99999;
  box-sizing: border-box;
}

.text-mea {
  width: 100%;
  font-size: 28rpx;
  height: 40rpx;
  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  color: #616665;
  margin-bottom: 10rpx;
}
.pop1 {
  padding: 30rpx 22rpx 18rpx 22rpx;
  font-size: 32rpx;
  width: 600rpx;
  min-height: 176px;
  box-sizing: border-box;
  .my-btn {
    width: 132rpx;
    height: 56rpx;
    border-radius: 20rpx;
    color: #fdfdfd;
    background: #ff9000;
    font-size: 32rpx;
    margin-top: 82rpx;
  }
  .input {
    :deep().uni-easyinput__content-input {
      height: 50rpx;
      font-size: 32rpx;
    }
  }
}
.btn-box {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  position: relative;
  margin-top: 20rpx;
}

.btn-apply {
  border-radius: 10rpx;
  width: 190rpx;
  height: 60rpx;
  background: linear-gradient(288deg, #05d5bf 0%, #06c2ae 50%, #a2cefd 100%);
  font-size: 28rpx;
  display: flex;
  align-items: center;
  padding: 10rpx;
  color: #ffffff;
  border: none !important;
}

.btn-change {
  color: #fff;
  background-color: red;
  width: 130rpx;
  height: 60rpx;
}

.btn-style {
  width: 130rpx;
  height: 60rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  color: #7c7c7c;
  border: 1rpx solid #c0c0c0;
}
.btn-yao {
  width: 130rpx;
  height: 60rpx;
  border-radius: 10rpx;
  background: linear-gradient(295deg, #05d5bf 0%, #06c2ae 50%, #a2cefd 100%);
  font-size: 28rpx;
  color: #fff;
}
.bgTop {
  width: 100%;
  height: 331rpx;
  margin-top: v-bind('-sys_navBar + "px"');
  margin-bottom: -200rpx;
  background-color: #a6c4f7;
  background-image: linear-gradient(180deg, #a6c4f7 5%, #d7d2fa 68%, #ffffff 100%);
}

:deep().u-tabs {
  background: transparent !important;
  border: none !important;
  margin-top: -40rpx !important;
  margin-bottom: 10rpx;
}

.cardBox-bg {
  width: 100%;
  height: 295rpx;
}

.infoCard {
  width: 100%;
  margin-top: 30rpx;
}

.btn {
  width: 702rpx;
  height: 80rpx;
  background: #003288;
  border-radius: 49rpx;
  font-size: 32rpx;
  color: #ffffff;
}

.btn-translation {
  width: 702rpx;
  height: 80rpx;
  color: #003288;
  // background: #003288;
  // border-radius: 49rpx;
  font-size: 32rpx;
  color: #ffffff;
}

.btn[disabled] {
  background: rgba(115, 121, 136, 0.4) !important;
}
.remark {
  margin-left: 20rpx;
  color: #3d3d3d;
  font-weight: bold;
}
.font-w {
  font-weight: bold;
}
</style>